<?php
/* 
 * semua data diinisialisasi disini
 * agar 1 form ini bisa digunakan untuk tambah dan edit data
 * aturan dari {name} dari field form adalah data[nama_field_database]
 * misal : dalam table jenis kajian ada field nama
 * untuk membuat name dari field form tsb, {name} nya adalah data[nama]
 * proses simpan data menggunakan ajax jquery (bisa dilihat dokumentasinya di jquery)
 * form validationnya menggunakan jquery validation engine (bisa dilihat di google)
 */
 
$id=0;
$nama="";
$alamat="";
$keterangan="";
$kota="";
$kota_id="";
$jns_lokasi_id="";
$photo="";
$published="no";
$lat="-7.302987489892322";
$lng="112.70922798077208";
foreach($lokasi->result_array() as $row){
	$id = $row['id'];
	$nama = $row['nama'];
	$alamat=$row['alamat'];
	$keterangan=$row['keterangan'];
	$kota=$row['nama_kota'];
	$kota_id=$row['kota_id'];
	$jns_lokasi_id=$row['jns_lokasi_id'];
	$photo=$row['photo'];
	$published=$row['published'];
	$lat=$row['lat'];
	$lng=$row['lng'];
}
?>
<div class="grid_9">
<div class="error" style="display:none">Error</div>
<form id="form_upload" target="frame" action="<?php echo base_url()."admin/lokasi/form/".$id?>" class="styled" method="post" enctype="multipart/form-data" >	
	
	<div class="left grid_4">
		<label for="name">Nama Lokasi</label>
		<input id="name" class="textbox validate[required]" type="text" name="data[nama]" id="name" value="<?php echo $nama?>"  />
		<label for="alamat">Alamat</label>
		<textarea id="alamat" class="textbox validate[required]" type="text" name="data[alamat]" id="alamat"><?php echo $alamat?></textarea>
		<label for="keterangan">Keterangan</label>
		<textarea id="keterangan" class="textbox" type="text" name="data[keterangan]" id="keterangan"><?php echo $keterangan?></textarea>
		<label for="kota">Kota</label>
		<input id="kota" class="textbox validate[required]" type="text"  value="<?php echo $kota?>"  />
		<input type="hidden" id="kota_id" name="data[kota_id]" value="<?php echo $kota_id?>" />
		<label for="lokasi">Jenis Lokasi</label>
		<select id="lokasi" name="data[jns_lokasi_id]" class="textbox">
			<?php foreach($jenis_lokasi['data']->result_array() as $row){?>
				<option value="<?php echo $row['id']?>" <?php echo $row['id']==$jns_lokasi_id?'selected="selected"':''?>><?php echo $row['nama']?></option>
			<?php } ?>
		</select>
		<label>Published</label>
		<input type="radio" name="data[published]" <?php echo $published=="yes"?'checked="checked"':''?> value="yes" />&nbsp;YES
		&nbsp;&nbsp;
		<input type="radio" name="data[published]" <?php echo $published=="no"?'checked="checked"':''?> value="no" />&nbsp;NO
		<br /><br />
		<label for="name">Gambar Lokasi</label>
		<input type="hidden" id="photo" name="data[photo]" value="<?php echo $photo?>" />
		<?php echo $photo!=''?'<img src="'.base_url().'images/location/'.$photo.'" width="50" height="50" />':''?>
		<input id="name" class="textbox" type="file" name="userfile" id="userfile"  />	
		<input type="submit" value="SIMPAN" class="right button" />
	</div>
	<div class="right grid_4">
		<label>Peta</label>
		<div id="map" style="height:300px;float:center;"></div>
		<input type="hidden" id="lat" name="data[lat]" value="<?php echo $lat?>" />
		<input type="hidden" id="lng" name="data[lng]" value="<?php echo $lng?>" />
	</div>
	
</form>
</div>
<iframe id="frame" name="frame" width=0 height=0 border=0 ></iframe>
<script>
$("#form_upload").validationEngine();

function respon(str){
	 $.fancybox.hideActivity();

	var obj = jQuery.parseJSON(str);
	if(obj.status == 'success'){
		window.location = "<?php echo base_url()?>"+obj.url;
	}else{
		$(".error").text(obj.msg);
		$(".error").fadeIn(1000);
	}
}
$("#form_upload").submit(function(){
	if($(this).validationEngine('validate')){
		 $.fancybox.showActivity();
		$(".error").hide();
		
		return true;
	}
	return false;
});

$(document).ready(function(){
	  
	  $("#kota").autocomplete('<?php echo base_url()?>admin/kota/autocomplete.html', {
			autoFill: true,
			minChars: 3,
			mustMatch: true
		}).result(function(data, row) {
			var r = row;
			if (typeof r != 'undefined') {
				$("#kota_id").val(r[1]);
			}
	});
	  
	setTimeout(function(){

		$("#map").gmap3(
			{ action:'init',
				options:{
					center:[<?php echo $lat?>,<?php echo $lng?>],
					zoom: 5
				}
			},
			{ 
				action: 'addMarker',
				lat:<?php echo $lat?>,
				lng:<?php echo $lng?>,
				marker:{
					options:{
						draggable: true,
						animation: google.maps.Animation.DROP
					},
					events:{
						click: function(marker, event, data){
							var map = $(this).gmap3('get'),
							infowindow = $(this).gmap3({action:'get', name:'infowindow'});
							infowindow.open(map, marker);
						},
						dragend: function(marker){
							$(this).gmap3({
								action:'getAddress',
								latLng:marker.getPosition(),
								callback:function(results){
									$("#lat").val(marker.getPosition().lat());
									$("#lng").val(marker.getPosition().lng());
								}
							});
						}
					}
				},
			}
		);
		
	},1000);
});
</script>